<template>
  <div class="card content-box">
    <div class="stationLayout">
      <div class="layoutInfoWrap">
        <div class="layoutInfo">
          <div class="layout">
            <div class="layoutCon">
              <div class="layoutItem"></div>
            </div>
          </div>
          <div class="deviceMenuList">
            <TreeFilter
              label="name"
              title=""
              :data="deviceMenu"
              :multiple="true"
              :needSearch="false"
              :onlyLeafNodeHighlight="false"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx" name="videoMonitor">
import { ref } from "vue";
import TreeFilter from "@/components/TreeFilter/index.vue";

const deviceMenu = ref([
  {
    id: "1",
    name: "装置1",
    children: [
      { id: "11", name: "位号01 「I型集中器：006100001234」" },
      { id: "12", name: "位号02 「三相电表：009100001234」" },
      { id: "13", name: "位号01 「I型集中器：006100001234」" },
      { id: "14", name: "位号02 「三相电表：009100001234」" }
    ]
  },
  {
    id: "2",
    name: "装置2",
    children: [
      { id: "21", name: "位号01 「I型集中器：006100001234」" },
      { id: "22", name: "位号02 「三相电表：009100001234」" },
      { id: "23", name: "位号01 「I型集中器：006100001234」" },
      { id: "24", name: "位号02 「三相电表：009100001234」" }
    ]
  },
  {
    id: "3",
    name: "装置3",
    children: [
      { id: "31", name: "位号01 「I型集中器：006100001234」" },
      { id: "32", name: "位号02 「三相电表：009100001234」" },
      { id: "33", name: "位号01 「I型集中器：006100001234」" },
      { id: "34", name: "位号02 「三相电表：009100001234」" }
    ]
  }
]);
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
